<template>
    <div class="">
        <!-- 分页器组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: "pagination",
    data() {
        return {}
    },
    props: {
        currentPage: {
            type: Number //当前页码
        },
        pageSize: {
            type: Number //每页显示多少条数据
        },
        total: {
            type: Number // 总数居
        }
    },
    created() {},
    methods: {
        handleSizeChange(val) {
            this.$emit("pageSizeChange", val) // 更改每页多少条数据的触发
        },
        handleCurrentChange(val) {
            this.$emit("pageCurrentChange", val) // 改变当前页码的时候出发
        }
    }
}
</script>
<style scoped></style>
